<template>
  <div>
    <van-grid>
      <router-link :to="item.to" v-for="item in list" :key="item.tetx">
        <van-grid-item :icon="item.icon" :text="item.text"></van-grid-item
      ></router-link>
    </van-grid>
  </div>
</template>
<script>
// vue的特点，需要的插件或者方法需要按需引入。
import { ref, watch, onMounted } from "vue";
import { Grid, GridItem } from "vant";
import { useRoute } from "vue-router";
// import index from "../home/index.vue";
import zu1 from "../assets/images/组 1.png";
import zu2 from "../assets/images/组 2.png";
import zu3 from "../assets/images/组 3.png";
import zu4 from "../assets/images/组 4.png";
import zu5 from "../assets/images/组 5.png";
import zu6 from "../assets/images/组 6.png";
import zu7 from "../assets/images/组 7.png";
import zu8 from "../assets/images/组 8.png";

export default {
  // 组件注册
  components: {
    vanGrid: Grid,
    vanGridItem: GridItem,
  },
  setup() {
    //
    const route = useRoute();
    const list = ref([
      { text: "首页", icon: zu5, to: "/home/index" },
      { text: "课程", icon: zu2, to: "/home/course" },
      { text: "成长", icon: zu3, to: "/home/growing" },
      { text: "我的", icon: zu4, to: "/home/my" },
    ]);
    onMounted(() => {
      fn()();
      // list.value.forEach((item) => {
      //   if (item.to == route.path) {
      //     fn()();
      //     console.log(item.text);
      //   }
      // });
    });
    watch(route, fn());
    function fn() {
      return () => {
        if (route.path.startsWith(list.value[0].to)) {
          list.value[0].icon = zu5;
        } else {
          list.value[0].icon = zu1;
        }
        if (route.path.startsWith(list.value[1].to)) {
          list.value[1].icon = zu6;
        } else {
          list.value[1].icon = zu2;
        }
        if (route.path.startsWith(list.value[2].to)) {
          list.value[2].icon = zu7;
        } else {
          list.value[2].icon = zu3;
        }
        if (route.path.startsWith(list.value[3].to)) {
          list.value[3].icon = zu8;
        } else {
          list.value[3].icon = zu4;
        }
      };
    }

    // 将组件里面的定义的变量和方法要返回出去（相当于暴露出去）
    return {
      list,
      zu1,
      zu2,
      zu3,
      zu4,
      zu5,
      zu6,
      zu7,
      zu8,
    };
  },
};
</script>
<style lang="less" scoped>
.van-grid {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  //   height: 98px;
  a {
    width: 25%;
  }
  .active {
    color: orange;
  }
}
</style>
